<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active{
            background: yellow;
        }
    </style>
</head>
<body>
   <div id="app">
            <!--  :class="类名：boolean值"   类名代表class定的样式名。例如.active -->
            <span :class="{active:isActive}">{{message}}</span><br/>

            <span :class="getClass()">{{message}}</span><br/>

            <span :class="[active1]">{{message}}</span><br/>
       </div>

        <!--

         class ,style 绑定  对象绑定，数组绑定 常用的对象绑定
         -->
       <script src="js/vue.js"></script>
       <script>
         const app=new Vue({
           el: '#app',
           data: {
               message:'你好vue',
               isActive: true,
               active1:'active'
           },
           methods:{
               getClass:function(){
                   return {active:this.isActive};
               }
           }
         })
       </script>
</body>
</html>